<?php
?>
<!DOCTYPE html>
<html lang="zh-cn" style="height: 100%">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title><?=VIEW_TITLE?></title>
    <link href="<?php echo base_url('/assets/bs/'); ?>css/bootstrap.min.css" rel="stylesheet">
    <link href="<?php echo base_url('/assets/cropper/dist/cropper.min.css'); ?>" rel="stylesheet">
    <link href="<?php echo base_url('/assets/css/'); ?>my_common.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <style>
        img {
            max-width: 100%;
        }

        .cropper-view-box,

        /*.cropper-face {*/
        /*border-radius: 50%;*/
        /*}*/
    </style>
</head>
<body>

<div class="container">
    <input type="file" id="file">
    <h1 class="page-header">Crop a round image</h1>
    <div class="row">
        <div class="col-sm-6">
            <h3 class="page-header">Image</h3>
            <div>
                <img class="img-responsive" id="image" src="http://localhost/cropper/assets/img/picture.jpg"
                     alt="Picture">
            </div>
        </div>
        <div class="col-sm-6">
            <h3 class="page-header">Result</h3>
            <button type="button" class="btn btn-primary" id="button">Crop</button>
            <div id="result"></div>
        </div>
    </div>
</div>
<button class="btn btn-primary" onclick="post()">fasong</button>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="<?php echo base_url('/assets/bs/'); ?>js/bootstrap.min.js"></script>
<script src="<?php echo base_url('/assets/cropper/dist/cropper.min.js'); ?>"></script>
<script>
    var this_file;
    $('#file').change(function () {
        console.log(1);
        var files = this.files;
        this_file = this.files;
        console.log(files);
//        file = files[0];
        var blobURL = URL.createObjectURL(files[0]);
        $("#image").attr('src', blobURL);
        make();
//                cropper.reset().replace(blobURL);
    });
    function getRoundedCanvas(sourceCanvas) {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        var width = sourceCanvas.width;
        var height = sourceCanvas.height;
        canvas.width = width;
        canvas.height = height;
        context.beginPath();
        context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI);
        context.strokeStyle = 'rgba(0,0,0,0)';
        context.stroke();
        context.clip();
        context.drawImage(sourceCanvas, 0, 0, width, height);
        return canvas;
    }
    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type: mime});
    }
    function make() {
        var $image = $('#image');
        var $button = $('#button');
        var $result = $('#result');
        var croppable = false;
        $image.cropper({
            aspectRatio: 1,
            viewMode: 1,
            built: function () {
                croppable = true;
            }
        });

        $button.on('click', function () {
            var croppedCanvas;
            var roundedCanvas;
            if (!croppable) {
                return;
            }
            // Crop
            croppedCanvas = $image.cropper('getCroppedCanvas');
            // Round
//            roundedCanvas = getRoundedCanvas(croppedCanvas);
            // Show
            $result.html('<img src="' + croppedCanvas.toDataURL() + '">');
            this_file = dataURLtoBlob(croppedCanvas.toDataURL());
            post()
//            $('#file').val(croppedCanvas.toDataURL());
        });
    }

    function post() {
        //使用ajax发送
        var fd = new FormData();
        fd.append("image", this_file, "image.png");
//        var xhr = new XMLHttpRequest();
//        xhr.open('POST', '/server', true);
//        xhr.send(fd);
//        var form = new FormData();
//        form.append("file", this_file);                           // 文件对象
//        console.log(this_file);

        // XMLHttpRequest 对象
        $.ajax({
            url: '<?php echo site_url('/test/p')?>',
            type: 'post',
            data: fd,
            dataType: 'json',
            cache: false,
            processData: false,
            contentType: false,
            success: function (data) {
                console.log(data);
            }
        });
    }
</script>
<script type="text/javascript">

    function ajax() {

        //先声明一个异步请求对象
        var xmlHttpReg = null;
        if (window.ActiveXObject) {//如果是IE

            xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");

        } else if (window.XMLHttpRequest) {

            xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
        }

        //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求
        if (xmlHttpReg != null) {
            xmlHttpReg.open("get", "About.aspx", true);

            xmlHttpReg.send(null);
            xmlHttpReg.onreadystatechange = doResult; //设置回调函数

        }

        //回调函数
        //一旦readyState的值改变,将会调用这个函数,readyState=4表示完成相应

        //设定函数doResult()
        function doResult() {

            if (xmlHttpReg.readyState == 4) {//4代表执行完成


                if (xmlHttpReg.status == 200) {//200代表执行成功
                    //将xmlHttpReg.responseText的值赋给ID为resText的元素
                    document.getElementById("resText").innerHTML = xmlHttpReg.responseText;


                }
            }

        }


    }
</script>
</body>
</html>